<template>
  <view class="container">
    <!-- 新闻列表 -->
    <scroll-view
      scroll-y
      :style="{ height: scrollHeight + 'px' }"
      @scrolltolower="loadMore"
    >
      <view class="news-card" v-for="(item, index) in newsList" :key="index" @tap="toDetail(item)">
        <view>
			<image class="news-image" :src="item.pic" mode="aspectFill"></image>
		</view>
        <view class="news-content">
          <text class="news-title">{{ item.title }}</text>
          <view class="news-footer">
            <text class="news-date">{{ item.time }}</text>
          </view>
        </view>
      </view>

      <!-- 加载状态 -->
      <view v-if="loading" class="loading">
        <text>加载中...</text>
      </view>

      <!-- 没有更多数据 -->
      <view v-if="noMore" class="no-more">
        <text>没有更多了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
	data() {
		return {
			videoAd:null,
			content:{},
			newsList: [], // 新闻列表数据
			page: 0, // 当前页码
			pageSize: 10, // 每页显示的新闻数量
			loading: false, // 是否正在加载
			noMore: false, // 是否没有更多数据
			scrollHeight: 0, // scroll-view 的高度
		};
	},
	onShow() {
		var that = this
		that.videoAd = tt.createRewardedVideoAd({ adUnitId: '6noypfvl0bli9sz7y7' });
	},
	mounted() {
		this.getNewsList();
		this.calculateScrollHeight();
	},
	methods: {
		// 获取新闻列表
		async getNewsList() {
			var that = this
			if (that.loading || that.noMore) return;
			that.loading = true;
			try {
				// 模拟 API 请求
				uni.request({
				url: 'https://shengyou.mcruanjian.cn/api/v1/67a585a6948a5',
				method:'post',
				data: {channel:'NBA',start:that.page},
				success(res) {
					console.log(res.data.code)
					if (res.data.code == '1') {
						var mockData = res.data.data.list;
					} else {
						uni.showToast({
							title: '加载失败，请重试',
							icon: 'none',
						});
					}
					if (mockData.length > 0) {
						that.newsList = that.newsList.concat(mockData);
						that.page = that.newsList.length;;
					} else {
						that.noMore = true;
					}	
				},
				fail: (err) => {
				
				},
				complete: (e) => {
				
				}
			});
		} catch (error) {
			uni.showToast({
				title: '网络错误，请重试',
				icon: 'none',
			});
		} finally {
			that.loading = false;
		}
    },
    // 加载更多
    loadMore() {
      if (!this.noMore) {
        this.getNewsList();
      }
    },
    // 计算 scroll-view 的高度
    calculateScrollHeight() {
      const systemInfo = uni.getSystemInfoSync();
      this.scrollHeight = systemInfo.windowHeight - 20; // 50 是顶部导航栏的高度
    },
	toDetail(detail) {
		var that = this
		var content = {
		    time: detail.time,
		    title: detail.title,
		    cover: detail.pic,
		    content: detail.content,
		};
		uni.setStorage({
		  key: 'content',
		  data: content
		});
		uni.showModal({
			title:'提示',
			content:'观看激励视频后查看',
			confirmText: '确定',
			confirmColor: '#3CC51F',
			cancelText: '取消',
			cancelColor: '#ccc',
			success: function (res) {
				if (res.confirm) {
					//确定去看广告
					that.showVideoAd();
				}
			}
		})
	},
	bindListener(){
		var that = this
		that.videoAd.onLoad(() => {
			console.log("拉取广告素材成功");
		});
		that.videoAd.onClose((res) => {
			console.log(res)
			if (res.isEnded) {
				//看完奖励
				uni.navigateTo({
					url: "/pages/news/detail"
				});
			}else{
				//广告未看完
				uni.showToast({
					title: '广告未看完，无法获取奖励',
					icon: 'none',
				});
			}
		});
	  
		that.videoAd.onError(error => {
			console.log("errorCode: " + error.code);
			console.log("errMsg: " + error.errMsg);
		});
	},
	showVideoAd() {
	  // 绑定事件监听
	  this.bindListener();
	  // 显示广告
	  this.videoAd
	    .show()
	    .then(() => {
	      console.log("广告显示成功");
	    })
	    .catch((err) => {
	      console.log("广告组件出现问题", err);
	      // 可以手动加载一次
	      this.videoAd.load().then(() => {
	        console.log("手动加载成功");
	        // 加载成功后需要再显示广告
	        return videoAd.show();
	      });
	    });
	},
	
	unBindListener(){
	  this.videoAd.offLoad(() => {
	    console.log("解除绑定 load 事件的监听器");
	  });
	
	  this.videoAd.offError(() => {
	    console.log("解除绑定 error 事件的监听器");
	  });
	
	  this.videoAd.offClose(() => {
	    console.log("解除绑定 close 事件的监听器");
	  });
	}
	},
};
</script>
<style>
/* 新闻卡片 */
.news-card {
  overflow: hidden;
  display: flex;
}

/* 新闻图片 */
.news-image {
	padding-top: 10px;
	width: 120px;
	height:80px;
	margin-right: 10px;
}

/* 新闻内容 */
.news-content {
  padding: 10px 0 0 0;
}

/* 新闻标题 */
.news-title {
  font-size: 13px;
  font-weight: bold;
  color: #555;
  display: block;
  margin-bottom: 15px;
}

/* 新闻描述 */
.news-description {
  font-size: 14px;
  color: #666;
  display: block;
  margin-bottom: 10px;
}
/* 新闻底部信息 */
.news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 新闻日期 */
.news-date {
  font-size: 12px;
  margin-top: 15px;
  color: #999;
}
/* 新闻作者 */
.news-author {
  font-size: 12px;
  color: #999;
}
/* 加载状态 */
.loading,
.no-more {
  text-align: center;
  padding: 20px;
  font-size: 14px;
  color: #999;
}
</style>